import React,{Component} from "react";
import { inject,observer } from "mobx-react";
import { withRouter } from 'react-router-dom';
import {SearchBar,Icon,tools} from "weaver-mobile";
import { SearchAdvanced  } from "weaver-mobile-page";
import { toJS } from "mobx";

const {getLabel} = tools;

@withRouter
@inject("searchStore")
@observer
class SearchConponent extends Component{
  static defaultProps = {
    prefixCls : "odoc-com-search"
  }

  constructor(props){
    super(props)
    this.getExtraButton = this.getExtraButton.bind(this) 
    this.formData = {};
  }

  componentWillMount(){
    const {searchStore,pathname} = this.props;
    searchStore.setSearchPath(pathname);
  }

  componentDidMount(){
    const {searchStore,getCondition} = this.props;
    searchStore.getSearchCondition(getCondition);
  } 

  componentWillUnmount(){
    const {searchStore} = this.props;
    searchStore.setSearchValue("");
  }

  render(){
    const { history, searchStore,prefixCls,baseSearchKey,title,showHotSearch = false } = this.props;
    const { search,updateAdSearchSubject,searchFormChange,searchAdValue,searchHotTerm} = searchStore;    
    const seachTitle = title ? title : getLabel(500351,"请输入关键字");
    let showHotItem = false;
    // if(showHotSearch && searchHotTerm.dataList){
    //   showHotItem = true;
    // }
    return(
      <div className={prefixCls} >
        <SearchBar
          className="search-select"
          placeholder={seachTitle}
          showExtraButton
          extraButton={this.getExtraButton()}
          onExtraButtonClick={(key) => history.push(search.path) }
          onChange={val => updateAdSearchSubject(val,baseSearchKey)}
          value={searchAdValue}
          onSubmit={(value)=>this.onSearch(value,true)}
        />
        
        <SearchAdvanced
          store={search}
          onChange={(condition, value)=>searchFormChange(condition, value,baseSearchKey)}
          buttonGroupData={this.getSearchFormBtn()} 
        />

        {
          showHotItem && this.getHotSearchBar()
        }
      </div>
    )
  }

  getHotSearchBar = ()=>{
    const {prefixCls,searchStore} = this.props;
    const {searchHotTerm} = searchStore;
    return (
      <div className={`${prefixCls}-hotSearch`}>
        <div className={`${prefixCls}-hotSearch-title`}>{searchHotTerm.title}</div>
        <div className={`${prefixCls}-hotSearch-items`}>
          {
            searchHotTerm.dataList.map((item,index)=>{
              if(index < 4){
                return (
                  <div className={`${prefixCls}-hotSearch-items-searchItem`} key={index} onClick={()=>this.onSearch(item,true)}>
                    {item}
                  </div>
                )
              }
            })
          }
        </div>
      </div>
    )
  }

  getSearchFormBtn = ()=>{
    const { searchStore} = this.props;
    const {searchFormReset} = searchStore;
    const btns = [
      { key: 'reset', text: getLabel(2022,"重置"), onClick: () => searchFormReset()},
      { key: 'submit', text: getLabel(388113,"搜索"),onClick: () => this.onSearch(), type: 'primary',}
    ]
    return btns;
  }

  getExtraButton = ()=>{
    const {extraButton = []} = this.props;
    let iconBtn = [] ;
    if(extraButton.indexOf("advanced") > -1){
      iconBtn.push({ key: 'advanced', show: <Icon key="filter-o" type="filter-o" /> })
    }else if(extraButton.indexOf("selected") > -1){
      iconBtn.push({ key: 'selected', show: <Icon key="filter-o-hot" type="filter-o-hot" /> })
    }else if(extraButton.indexOf("drop") > -1){
      iconBtn.push({ key: 'drop', show: <Icon key="ellipsis" type="ellipsis" /> })
    }
    return iconBtn;
  }

  //搜索
  onSearch = (item,isHot = false)=>{
    const {getSearchData,searchStore,baseSearchKey,forward,history} = this.props;
    let formDatas=this.getFormData(toJS(searchStore.search.form.formParams))
    if(item){
      formDatas[baseSearchKey] = item;
      searchStore.setSearchValue(item);
      searchStore.search.form.updateField(baseSearchKey, item);
    }
    if(!forward && !isHot) history.go(-1);
    getSearchData(formDatas);
    this.formData = {}
  }

  //将组件的数据进行处理 
  getFormData=(data)=>{
    for(let key in data){
      if(typeof data[key] == "string"){
        this.formData[key] = data[key];
      }else if(typeof data[key] == "object"){
        if(data[key].length){
          let ids =[];
          for(let i in toJS(data[key])){
            ids.push(data[key][i].id);
          }
          this.formData[key] = ids.join(",");
        }else{
          this.getFormData(data[key])
        }
      }
    }
    return this.formData
  }
}

export default SearchConponent;